<template>
<div>
  <div class="hearder">
    <div class="search">
      <input type="text"  placeholder="请输入管理员ID"  v-model="userId">
     <div style="width: 10px;height: 50px;"></div>
    <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
  </div>
  <div class="add" @click="openAdd">
    <div><i class="el-icon-plus"></i></div>
    <div style="width: 5px;height: 50px;" ></div>
    新增
  </div>
    <div class="add" @click="getUser" style="background-color: #2AF598;margin-left: 15px">
      <div><i class="el-icon-user"></i></div>
      <div style="width: 5px;height: 50px;" ></div>
      所有
    </div>
</div>
  <div>
    <el-table
        :data="dataList"
        style="width: 100%;">
      <el-table-column
          prop="userId"
          header-align="center"
          align="center"
          label="id"
          width="55"
      >
      </el-table-column>
      <el-table-column
          prop="loginId"
          header-align="center"
          align="center"
          label="账号">
      </el-table-column>
      <el-table-column
          prop="img"
          header-align="center"
          align="center"
          label="头像">
        <template slot-scope="scope">
          　　　<img :src="scope.row.img" width="40" height="40" style="border-radius: 7px" v-if="scope.row.img!=null"/>
        </template>
      </el-table-column>
      <el-table-column
          prop="password"
          header-align="center"
          align="center"
          label="密码">
      </el-table-column>
      <el-table-column
          prop="status"
          header-align="center"
          align="center"
          label="状态">
        　<template slot-scope="scope">
        <el-tag type="success" style="line-height: 25px" v-if="scope.row.status == 0">有效</el-tag>
        <el-tag type="warning" style="line-height: 25px" v-if="scope.row.status == 1">失效</el-tag>
        　</template>
      </el-table-column>
      <el-table-column
          prop="roleId"
          header-align="center"
          align="center"
          label="角色">
        　<template slot-scope="scope">
            <el-tag type="success" style="line-height: 25px" v-if="scope.row.roleId == 2">普通管理员</el-tag>
            <el-tag type="danger" style="line-height: 25px" v-if="scope.row.roleId == 1">超级管理员</el-tag>
        　</template>
      </el-table-column>
      <el-table-column
          prop="email"
          header-align="center"
          align="center"
          label="邮箱">
      </el-table-column>
      <el-table-column
          prop="mobail"
          header-align="center"
          align="center"
          label="电话">
      </el-table-column>
      <el-table-column
          prop="creareUserId"
          header-align="center"
          align="center"
          label="创建者id">
      </el-table-column>
      <el-table-column
          prop="createTimeStr"
          header-align="center"
          align="center"
          label="创建时间">
      </el-table-column>
      <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openUpdate(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="recover(scope.row.userId)" v-if="scope.row.status==1">恢复工号</el-button>
          <el-button type="text" size="small" @click="invalid(scope.row.userId)" v-if="scope.row.status==0">失效</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-dialog :title="dialogType=='add'?'新增管理员':'修改管理员信息'" :visible.sync="addUpdateDialog" :close-on-click-modal='closeonclickmodal' :show-close="closeonclickmodal">
      <el-dialog
          width="30%"
          append-to-body>
      </el-dialog>
      <div class="form">
        <div class="form-item">
          <div class="item-left">登录名</div>
          <input v-model="form.loginId" @change="selectLoginId"/>
        </div>
        <div class="form-item">
          <div class="item-left">密码</div>
          <input v-model="form.password"/>
        </div>
        <div class="form-item">
          <div class="item-left">邮箱</div>
          <input v-model="form.email"/>
        </div>
        <div class="form-item">
          <div class="item-left">电话</div>
          <input v-model="form.mobail"/>
        </div>

        <div class="form-item">
          <span><input type="radio"  name="role" :checked="form.role==1?true:false"  @click="chooseRole(1)">超级管理员</span>
          <span><input type="radio"   name="role" ref="radio2"  :checked="form.role==2?true:false" @click="chooseRole(2)">普通管理员</span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="add" v-if="dialogType=='add'">提交添加</el-button>
        <el-button type="primary" @click="update" v-if="dialogType=='update'">提交修改</el-button>
      </div>
    </el-dialog>
  </div>
  <div class="page" v-if="dataList.length>1">
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[7,15,20,30,50,200]"
          :page-size='pageSize'
          layout="total, sizes, prev, pager, next, jumper"
          :total='total'>
      </el-pagination>
    </div>
  </div>


</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'
import store from "@/store/index"
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
  dataList:[],
  addUpdateDialog:false,
  userId:null,
  closeonclickmodal:false,
  dialogType:null,
  form:{
    userId:null,
    loginId:null,
    password:null,
    email:null,
    mobail:null,
    role:2,
  },
  pageSize:7,
  pageNum:1,
  total:0,
  dialogVisible:false,
  doTitle:null
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  getUser(){
    this.$http({
      url: 'sys/user/page',
      method: 'post',
      data:this.$http.adornData({
        pageNum:this.pageNum,
        pageSize:this.pageSize
      })
    }).then((res)=>{
      // console.log("用户数据",res.data.page.list)
      this.total = res.data.page.totalCount
      this.dataList = res.data.page.list
    })
  },
  search(){
    this.$http({
      url: "sys/user/search",
      method: 'post',
      data:this.$http.adornData({
        userId:this.userId,
      })
    }).then((res)=>{
      this.dataList = res.data.list
    })
  },
  openAdd(){
    this.dialogType="add"
    this.addUpdateDialog=true
  },
  openUpdate(item){
    // console.log(item)
    this.dialogType="update"
    this.form.userId = item.userId
    this.form.loginId = item.loginId
    this.form.password = item.password
    this.form.email = item.email
    this.form.mobail = item.mobail
    this.form.role = item.roleId
    this.addUpdateDialog=true
  },
  closeDialog(){
    this.addUpdateDialog=false
  },
  recover(item){
    // this.dialog = true
    // console.log(item)
    this.$http({
      url:"sys/user/recover",
      method:"post",
      data:item
    }).then((res)=>{
      if (res.data.code==800){
        this.getUser()
      }
    })
  },
  invalid(item){
    // this.dialog = false
    this.$http({
      url:"sys/user/invalid",
      method:"post",
      data:item
    }).then((res)=>{
      if (res.data.code==800){
        this.getUser()
      }
    })
  },
  add(){
    this.$http({
      url: "sys/user/add",
      method: "post",
      data:this.$http.adornData({
        createUserId: sessionStorage.getItem("userId"),
        loginId:this.form.loginId,
        password: this.form.password,
        email:this.form.email,
        mobail:this.form.mobail,
        role: this.form.role,
      })
    }).then((res)=>{
      if (res.data.code==800){
        this.closeDialog()
        this.getUser()
        this.form.userId=null
        this.form.userId = null
        this.form.loginId = null
        this.form.password = null
        this.form.email = null
        this.form.mobail = null
        this.form.role = 2
      }
    })
  },
  update(){
    this.$http({
      url: 'sys/user/maxupdate',
      method:'post',
      data:this.$http.adornData({
        userId:this.form.userId,
        loginId:this.form.loginId,
        password: this.form.password,
        email:this.form.email,
        mobail:this.form.mobail,
        roleId:this.form.role
      })
    }).then((res)=>{
      if (res.data.code==800){
        this.closeDialog()
        this.getUser()
        this.form.userId=null
        this.form.userId = null
        this.form.loginId = null
        this.form.password = null
        this.form.email = null
        this.form.mobail = null
        this.form.role = 2
      }
    })
  },
  chooseRole(value){
    // console.log(item)
   this.form.role = value
  },
  deleteUser(item){
    // console.log(item.target.attributes)
  },
  selectLoginId(){
    this.$http({
      url: "sys/user/selectByLoginId",
      method:"post",
      data:{
        loginId:this.form.loginId
      }
    })
  },
  handleSizeChange(val) {
    this.pageSize = val
    this.getUser()
  },
  handleCurrentChange(val) {
    this.pageNum = val
    this.getUser()

  },
},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
  this.getUser()
},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
*{
  line-height: 0;
}
.hearder{
  display: flex;
  width: 100%;
  height: 100px;
  /*background-color: #FBAB7E;*/
}
.search{
  display: flex;
  margin: 25px;
  /*width: 350px;*/
  height: 50px;
  /*background-color: red;*/
}
.search>input{
  width: 200px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 10px;
  color: #99A3A4;
  font-size: 17px;
  border: 1px solid #409eff;
  outline-color: #48dd68;
}
.add{
  display: flex;
  margin-top: 25px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 100px;
  border-radius: 5px;
  color: #ffffff;
  font-size: 16px;
  background-color: #EC7063;
}
.add>div{
  width: 35px;
  height: 50px;
  text-align: right;
  line-height: 50px;
}
.add:active{
  background-color: #2AF598;
}
.form{
  margin: 15px auto;
  width: 90%;
  height: 300px;
  /*background-color: red;*/
}
.form-item{
  margin: 20px auto;
  display: flex;
  width: 300px;
  height: 50px;
  /*background-color: #2AF598;*/
}
.item-left{
  width: 100px;
  height: 50px;
  line-height: 50px;
}
.form-item>input{
  width: 190px;
  outline-color:#48dd68;
  border-radius: 7px;
  font-size: 17px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #99A3A4;
}

</style>
